<script>
  import sheep from '@/sheep';

  export default {
    name: "s-avatar",
    props: {
      /**
       * @destroyed src 图片地址
       */
      src: {
        type: [String, Array],
        default: ''
      },
      /**
       * @destroyed width 图片宽度 单位rpx
       */
      width: {
        type: [Number, String],
        default: 200
      },
      /**
       * @destroyed width 图片高度 单位rpx
       */
      height: {
        type: [Number, String],
        default: 200
      },
      /**
       * @destroyed mode 图片裁剪模式
       */
      mode: {
        type: String,
        default: 'widthFix'
      },
      isOrder: {
        type: Boolean,
        default: false
      },
      borderWidth: {
        type: Number,
        default: 2
      },
      borderColor: {
        type: String,
        default: '#FF4206'
      },
      margin: {
        type: String,
        default: ''
      },
      is_show_border_line: {
        type: Boolean,
        default: false
      },
      is_vip: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path
      }
    },
    watch: {
      src: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal) {
            this.$forceUpdate()
          }
        }
      }
    },
    methods: {
      avatarClick() {
        this.$emit('avatarClick')
      }
    },
  }
</script>

<template>
  <view class="imageAvaters" :style="{
      width:`${width}rpx`,
      height:`${height}rpx`,
      margin:margin
    }">
    <!-- #ifdef APP-PLUS -->
    <view class="imageAvater flex align-center justify-center" :style="{
      width:`${width}rpx`,
      height:`${height}rpx`,
      border:!!isOrder? `${borderWidth}rpx solid ${borderColor}` : 'none',
    }">
      <image :src="src" :style="{
        width:`${width}rpx`,
        height:`${height}rpx`,
      }"></image>
    </view>
    <view class="w-full h-full" v-if="is_show_border_line && !!is_vip">
      <image :src="is_vip ? `${IMG_URL}userborder_uservip.png` : `${IMG_URL}userborder_user.png`" :style="{
      width:`${width  + 15 }rpx`,
      height:`${height  + 15}rpx`,
    }" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></image>
    </view>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS -->
    <view class="imageAvater" :style="{
      width:`${width}rpx`,
      height:`${height}rpx`,
      border:!!isOrder? `${borderWidth}rpx solid ${borderColor}` : 'none',
    }">
      <image :src="src" :style="{
      width:'100%'
    }" :mode="mode"></image>
    </view>
    <view class="w-full h-full" style="position: absolute;top: 45%;left: 45%;transform: translate(-50%,-50%);"
          v-if="is_show_border_line && !!is_vip">
      <image v-if="!!is_vip" :src="is_vip ? `${IMG_URL}/index/userborder_uservip.png` : `${IMG_URL}/index/userborder_user.png`" :style="{
        width:`${width + 15}rpx`,
        height:`${height + 15}rpx`,
      }"></image>
    </view>
    <!-- #endif -->
  </view>
</template>

<style scoped lang="scss">
  .imageAvaters {
    position: relative;
  }

  .imageAvater {
    border-radius: 50%;
    overflow: hidden;
  }
</style>